<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>活动</title>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../css/active.css">
    <script type="text/javascript" src="../jquery/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="../js/active.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
</head>
<body class="gray-bg">
<div class="row">
    <div class="col-xs-12">
        <div class="wrapper wrapper-content animated fadeInUp">
            <div class="ibox">
                <div class="ibox-content">
                    <div class="row text-center">
                        <div class="col-xs-12">
                            <div class="m-b-xs">
                                <!--<a href="#" class="btn label-primary btn-xs pull-right">发布活动</a>-->
                                <h2 style="margin-top: -10px">活动题目</h2>
                            </div>
                            <dl class="dl-horizontal">
                                <dd><strong>活动结束倒计时</strong>
                                    <div class="content margintop">
                                        <div class="time text-center" id="time1">
                                            <!--<span class="danwei_first"></span>-->
                                            <div class="time-img" style="width: 22%;">
                                                <span><img class="margintop" id="day_01" alt="" src="../image/0.png"></span>
                                                <span><img class="margintop" id="day_02" alt="" src="../image/0.png"></span>
                                            </div>
                                            <div class="time-img" style="width: 22%;margin-left: 4%">
                                                <span><img class="margintop" id="hour_01" alt="" src="../image/0.png"></span>
                                                <span><img class="margintop" id="hour_02" alt="" src="../image/0.png"></span>
                                            </div>
                                            <div class="time-img" style="width: 22%;margin-left: 4%">
                                                <span><img class="margintop" id="minute_01" alt="" src="../image/0.png"></span>
                                                <span><img class="margintop" id="minute_02" alt="" src="../image/0.png"></span>
                                            </div>
                                            <div class="time-img" style="width: 22%;margin-left: 4%">
                                                <span><img class="margintop" id="second_01" alt="" src="../image/0.png" ></span>
                                                <span><img class="margintop" id="second_02" alt="" src="../image/0.png"></span>
                                            </div>
                                            <br class="clear">
                                        </div>
                                        <span id="time"></span>
                                    </div>
                                </dd>
                            </dl>
                        </div>
                    </div>
                    <div class="panel panel-info" style="border-bottom: none;border-radius: 0px">
                        <div class="panel-heading">活动信息</div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-xs-12">
                                    <dl class="dl-horizontal">
                                        <dt><a class="btn btn-xs btn-primary">发&nbsp;&nbsp;布&nbsp;&nbsp;者:</a> <strong class="strong-color"> Alex Smith</strong></dt>
                                        <dt class="dt-padding"><a class="btn btn-xs btn-primary">活动信息:</a> <strong class="strong-color"> Alex </strong>
                                        <dt class="dt-padding"><a class="btn btn-xs btn-primary">主办单位:</a> <a href="#" class="text-navy"> Zender Company</a></dt>
                                        <dt class="dt-padding"><a class="btn btn-xs btn-primary">开始时间:</a> <strong class="strong-color"> 2015-8-8 12:15:57</strong></dt>
                                        <dt class="dt-padding"><a class="btn btn-xs btn-primary">最后更新:</a> <strong class="strong-color"> 2015-8-7 23:36:57</strong></dt>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-info" style="margin-top: -20px;border-radius: 0px">
                        <!--<div class="panel-heading">活动进度</div>-->
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-xs-12" id="cluster_info">
                                    <dl class="dl-horizontal">
                                        <dt><a class="btn btn-xs btn-primary">参与者:</a></dt>
                                        <dd class="project-people" style="margin-top: 3px">
                                            <a href="#"><img alt="image" class="img-circle" src="../image/a3.jpg"></a>
                                            <a href="#"><img alt="image" class="img-circle" src="../image/a1.jpg"></a>
                                            <a href="#"><img alt="image" class="img-circle" src="../image/a2.jpg"></a>
                                            <a href="#"><img alt="image" class="img-circle" src="../image/a4.jpg"></a>
                                            <a href="#"><img alt="image" class="img-circle" src="../image/a5.jpg"></a>
                                            <a href="#"><img alt="image" class="img-circle" src="../image/a1.jpg"></a>
                                            <a href="#"><img alt="image" class="img-circle" src="../image/a2.jpg"></a>
                                        </dd>
                                    </dl>
                                </div>
                                <div class="col-xs-12">
                                    <dl class="dl-horizontal">
                                        <dd>
                                            <div class="progress progress-striped active m-b-xs">
                                                <div style="width: 60%;" class="progress-bar progress-bar-danger"></div>
                                            </div>
                                            <small>活动参与人数达<strong id="jd">60%</strong></small>
                                        </dd>
                                    </dl>
                                </div>
                                <div class="col-xs-12">
                                    <dl class="dl-horizontal">
                                        <dd>
                                            <a id="join" class="btn btn-sm col-xs-4 btn-success"><span class="glyphicon glyphicon-heart-empty"></span> 我要参与 </a>
                                            <a id="like" class="btn btn-sm col-xs-4 col-xs-offset-4 btn-success"><span class="glyphicon glyphicon-thumbs-up"></span> <span>2222</span></a>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row m-t-xs">
                        <div class="col-xs-12">
                            <div class="panel blank-panel">
                                <div class="panel-heading">
                                    <div class="panel-options row-border">
                                        <ul class="nav nav-pills" style="padding-bottom: 3px">
                                            <li class="active"><a href="#tab-1" data-toggle="tab">最新动态</a></li>
                                            <li class=""><a href="#tab-2" data-toggle="tab">我要评论</a></li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="panel-body">

                                    <div class="tab-content">
                                        <div class="tab-pane active" id="tab-1">
                                            <div class="feed-activity-list">
                                                <div class="feed-element">
                                                    <a href="#" class="pull-left">
                                                        <img alt="image" class="img-circle" src="../image/a2.jpg">
                                                    </a>
                                                    <div class="media-body ">
                                                        <small class="pull-right">2h ago</small>
                                                        <strong>Mark Johnson</strong> 发表评论<br>
                                                        <small class="text-muted">今天 2:10 pm - 12.06.2014</small>
                                                        <div class="well">
                                                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                                                            Over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
                                                        </div>
                                                        <div class="text-right">
                                                            <a class="btn btn-xs btn-primary"><span class="glyphicon glyphicon-thumbs-up"></span> 11</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="feed-element">
                                                    <a href="#" class="pull-left">
                                                        <img alt="image" class="img-circle" src="../image/a2.jpg">
                                                    </a>
                                                    <div class="media-body ">
                                                        <small class="pull-right">2h ago</small>
                                                        <strong>Mark Johnson</strong> 发表评论<br>
                                                        <small class="text-muted">今天 2:10 pm - 12.06.2014</small>
                                                        <div class="well">
                                                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                                                            Over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
                                                        </div>
                                                        <div class="text-right">
                                                            <a class="btn btn-xs btn-primary"><span class="glyphicon glyphicon-thumbs-up"></span> 11</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="feed-element">
                                                    <a href="#" class="pull-left">
                                                        <img alt="image" class="img-circle" src="../image/a2.jpg">
                                                    </a>
                                                    <div class="media-body ">
                                                        <small class="pull-right">2h ago</small>
                                                        <strong>Mark Johnson</strong> 发表评论<br>
                                                        <small class="text-muted">今天 2:10 pm - 12.06.2014</small>
                                                        <div class="well">
                                                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                                                            Over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
                                                        </div>
                                                        <div class="text-right">
                                                            <a class="btn btn-xs btn-primary"><span class="glyphicon glyphicon-thumbs-up"></span> 11</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="feed-element">
                                                    <a href="#" class="pull-left">
                                                        <img alt="image" class="img-circle" src="../image/a2.jpg">
                                                    </a>
                                                    <div class="media-body ">
                                                        <small class="pull-right">2h ago</small>
                                                        <strong>Mark Johnson</strong> 发表评论<br>
                                                        <small class="text-muted">今天 2:10 pm - 12.06.2014</small>
                                                        <div class="well">
                                                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                                                            Over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
                                                        </div>
                                                        <div class="text-right">
                                                            <a class="btn btn-xs btn-primary"><span class="glyphicon glyphicon-thumbs-up"></span> 11</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--<div class="feed-element">-->
                                                    <!--<div class="text-left col-xs-6">-->
                                                        <!--<a class="btn btn-xs btn-primary">TOP <span class="glyphicon glyphicon-arrow-up"></span></a>-->
                                                    <!--</div>-->
                                                    <!--<div class="text-right col-xs-6">-->
                                                        <!--<a class="btn btn-xs btn-primary">更多 <span class="glyphicon glyphicon-forward"></span> </a>-->
                                                    <!--</div>-->
                                                <!--</div>-->
                                            </div>

                                        </div>
                                        <div class="tab-pane" id="tab-2">
                                            <div class="col-xs-12 text-right">
                                                <textarea class="form-control" style="resize: vertical" placeholder="填写评论内容"></textarea>
                                                <button class="btn btn-xs label-primary" style="margin-top: 10px">发表</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>